<template>
    <div class="orders">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>订单列表数据</span>
                <el-button style="float: right; padding: 3px 0" type="text">添加订单</el-button>
            </div>
            <!-- 搜索 -->
            <div class="condition_box">
                <el-input placeholder="请输入商品名称模糊搜索" v-model="keywords" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>
            <!-- 表格 -->
            <el-table border height="400" stripe :data="orders" style="width: 100%">
                <el-table-column prop="user_id" label="用户ID" width="70"></el-table-column>
                <el-table-column prop="pay_status" label="支付状态" width="80">{{ pay_status == 1 ? '已付款' : '未付款'
                }}</el-table-column>
                <el-table-column prop="order_fapiao_title" label="用途" width="100"></el-table-column>
                <el-table-column prop="order_fapiao_company" label="公司名称" width="200"></el-table-column>
                <el-table-column prop="order_fapiao_content" label="发票内容" width="150"></el-table-column>
                <el-table-column prop="consignee_addr" label="发票地址"></el-table-column>
                <el-table-column label="操作">
                    <el-button size="mini" type="success">编辑</el-button>
                    <el-button size="mini" type="danger">删除</el-button>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum"
                :page-sizes="[5, 10, 15]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
                :total="400">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            address: '',
            value: true,
            orders: [{
                "user_id": 133,
                "pay_status": "1",
                "is_send": "是",
                "order_fapiao_title": "个人",
                "order_fapiao_company": "",
                "order_fapiao_content": "办公用品",
                "consignee_addr": "北京市海淀区苏州街长远天地大厦305室"
            }],
            pagenum: 1,
            pagesize: 10,
            keywords: ''
        };
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
    },
    filters: {
        formate_date(_val) {
            if (_val) {
                let date = new Date(_val);
                return `${date.getFullYear()}-${date.getMonth() + 1
                    }-${date.getDay()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.orders {
    .condition_box {
        width: 330px;
        margin-bottom: 15px;
    }

    .el-pagination {
        margin-top: 15px;
    }
}
</style>
